<template>
  <div class='echartsfour' :style="{height:fullHeights+'px'}">
    <div id="echarts_four" :style="{height:fullHeight+'px'}"></div>
  </div>
</template>

<script>
  module.exports = {
    name: "echarts_four",
    data() {
      return {
        fullHeight: document.documentElement.clientHeight - 260,
        fullHeights: document.documentElement.clientHeight - 168,
        greenlengthlist: [],
        legendlist: [],
        arealist: [],
        datalist: [],
        onedatalist: [],
        twodatalist: [],
        threedatalist: []
      }
    },
    mounted() {
      this.echartsdata();
    },
    methods: {
      get(url, params) {
        return new Promise((resolve, reject) => {
          axios.get('./js/echarts_four.json')
            .then(response => {
              resolve(response);
            })
            .catch(err => {
              reject(err);
            })
        })
      },
      async echartsdata() {
        let myChart = echarts.init(document.getElementById('echarts_four'));
        let datas = await this.get();
        this.greenlengthlist = datas.data;
        this.greenlengthlist.forEach((v, i) => {
          this.arealist.push(v['行政区域']);
          this.onedatalist.push(v['路段总长度']);
          this.twodatalist.push(v['可绿化长度']);
          this.threedatalist.push(v['已绿化长度']);
        })
        this.datalist[0] = this.onedatalist;
        this.datalist[1] = this.twodatalist;
        this.datalist[2] = this.threedatalist;
        this.arealist.pop();
        this.legendlist = Object.keys(this.greenlengthlist[0]);
        let index = this.legendlist.indexOf("行政区域");
        this.legendlist.splice(index, 1);
        let data = {
          area: this.arealist,
          legend: this.legendlist,
          data: this.datalist
        }
        var colors = ['rgba(24,144,255,.6)', 'rgba(0,165,71,.6)', 'rgba(245,166,35,.6)']
        let option = {
          backgroundColor: '',
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
            formatter: function(o) {
              return o.seriesName + ' - ' + o.value+'公里'
            }
          },
          color: colors,
          grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          "legend": {
            top: 0,
            right: 0,
            data: data.legend,
            textStyle: {
              fontSize: 14,
              color: '#fff',
              padding: [2, 20, 0, 0]
            }
          },
          xAxis: [{
            "type": "category",
            "data": data.area,
            axisTick: {
              show: false,
            },
            axisLabel: {
              color: '#E9E9E9'
            },
            axisLine: {
              lineStyle: {
                color: '#E9E9E9'
              },
              width: 5
            }
          }],
          yAxis: [{
            "type": "value",
            max : 100,
            min : 0,
            splitNumber : 5,
            axisLabel: {
              color: '#E9E9E9'
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: '#E9E9E9',
                type: 'doshed'
              }
            },
            axisLine: {
              show: false
            }
          }],
          "series": []
        };
        for (var i = 0; i < data.legend.length; i++) {
          option.series.push({
            name: data.legend[i],
            type: 'bar',
            barWidth: '70',
            data: data.data[i]
          })
        }
        myChart.setOption(option);
        window.onresize = function() {
          myChart.resize();
        }
      }
    }
  }
</script>
